<script setup lang="ts">
import type { PropType } from 'vue'

type Api = {
  antPattern: string
  method?: string
}

defineProps({
  api: {
    type: Object as PropType<Api>,
    required: true
  },
  orderSwap: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <el-row type="flex" justify="space-between">
    <el-col v-if="orderSwap" :span="18">
      <span>{{ api.antPattern }}</span>
    </el-col>
    <el-col :span="6">
      <el-tag v-if="!api.method || 'GET' == api.method.toUpperCase()" size="default" type="primary">GET</el-tag>
      <el-tag v-else-if="'POST' == api.method.toUpperCase()" size="default" type="success">{{
        api.method.toUpperCase()
      }}</el-tag>
      <el-tag v-else-if="'PUT' == api.method.toUpperCase()" size="default" type="warning">{{
        api.method.toUpperCase()
      }}</el-tag>
      <el-tag v-else-if="'DELETE' == api.method.toUpperCase()" size="default" type="danger">{{
        api.method.toUpperCase()
      }}</el-tag>
    </el-col>
    <el-col v-if="!orderSwap" :span="18">
      <span>{{ api.antPattern }}</span>
    </el-col>
  </el-row>
</template>
